<template>
  <div id="mall">
    <div class="row" v-for="(goodsType,i) of goodsTypes" :key="i">
      <div class="classificationTitle col-12">
        <h2>{{goodsType.name}}</h2>
      </div>
      <div class="item-container d-flex flex-column align-items-center col-12 col-sm-12 col-md-6 col-lg-4 col-xl-3"
           v-for="(good,j) of goodsType.goods" :key="j">
        <img :src="good.cover.src">
        <div class="detail" style="border: 0;">
          <h5><a class="name">{{good.name}}</a></h5>
          <a class="more" :href="`https://www.baidu.com/s?wd=${good.name}&ie=utf-8`">了解更多</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Mall',
    data() {
      return {
        goodsTypes: [] // 商品类别信息（包含商品信息）
      }
    },
    created: function () {
      /**
       * 加载数据
       */
      this.selectGoodsType();
    },
    methods: {
      /**
       * 查询商品类别信息
       */
      selectGoodsType() {
        this.$postRequest('/gdd/website/selectGoodsTypeCascade').then(response => {
          this.goodsTypes = response.data;
        });
      }
    }
  }
</script>

<style scoped>
  @import "../../assets/css/TemplateOfList.css";
</style>
